<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>爱好</th>
                    <th>生日</th>
                    <th>家乡</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list":key="item.Id">
                    <td>{{ item.Id}}</td>
                    <td>{{ item. Name}}</td>
                    <td>{{ item. Sex}}</td>
                    <td>{{ item. Phone}}</td>
                    <td>{{ item. Hobby}}</td>
                    <td>{{ item. BirthDay}}</td>
                    <td>{{ item. HomeTown}}</td>
                    <td>{{ item. State}}</td>
<td>
    <input type="button" value="修改" class="btn btn-success">
    <input type="button" value="删除" class="btn btn-danger">
</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';

//定义变量接收后端返回值
let data: any = reactive({
    list: []
})


onMounted(()=>{
    getmember();
})

const getmember = () => {

    axios({
        method: 'get',
        url: '/api/Member/ShowMember',

    })
        .then(res => {
            data.list=res.data;
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })


}

</script>

<style scoped></style>